<template>
    <transition name="fade" mode="out-in">
        <div class="transition-example">
            <h1>Transition Example</h1>
            <p>This is a simple transition example using Vue.js.</p>
            <button @click="toggle">Toggle Transition</button>
            <div v-if="show" class="transition-box">
                <p>This box will fade in and out.</p>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
  name: 'TransitionExample',
  data() {
    return {
      show: true
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>